<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 v-if="true"> Vue is awesome! </h1>
        <h1 v-else> Oh no o(╥﹏╥)o </h1>
        {{message}}
        <p>Using mustaches: {{htmlStr}}</p>
        <p>Using v-html mustaches: <span v-html="htmlStr"></span></p>
    </div>
    <div id="app1">
        <span v-bind:title="message">鼠标悬停几秒后看效果</span>
    </div>
    <div id="app2">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <div id="app3">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <hr>
        <ol>
            <todo-item v-for="item,index in todos" v-bind:todo="item" v-bind:key="index"></todo-item>
        </ol>
    </div>
    <div id="app4">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage($event)">反转消息</button>
    </div>


    <div id="app_1">
        <template v-if="loginType==='username'">
            <label>Username</label>
            <input placeholder="输入 用户名" v-on:keyup.alt.81="qiehuan" />
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="输入 邮箱" v-on:keyup.alt.81="qiehuan" />
        </template>
        <br>
        <template v-if="loginType==='username'">
            <label>Username</label>
            <input placeholder="输入 用户名" key="username-input" />
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="输入 邮箱" key="email-input" />
        </template>

        <button v-on:click="qiehuan">切换类型</button>
    </div>

    <div id="app_2">
        <ol>
            <li v-for="n in evenNumbers" v-bind:key="n">{{n}}</li>
        </ol>
    </div>

    <div id="app5">
        <h3>文本</h3>
        <input v-model="message" placeholder="edit me" />
        <p>Original message: "{{message}}"</p>
        <p>Computed reversed message: "{{reverseMessage}}"</p>

        <h3>多行文本</h3>
        <span>多行文本:</span>
        <p style="white-space: pre-line;">{{multilineMessage}}</p>
        <br>
        <textarea v-model="multilineMessage" placeholder="添加多行文本"></textarea>

        <h3>选择框</h3>
        <h4>单选</h4>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>Apple</option>
            <option>Body</option>
            <option value="汤姆猫">Cat</option>
        </select>
        <span>选择了: {{selected}}</span>
        <h4>多选</h4>
        <select v-model="selectArray" multiple style="width: 250px;">
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>

        <span>选择了: {{selectArray}}</span>

        <h3>值绑定</h3>
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="大威天龙">
        <span>{{toggle}}</span>

        <hr>
        <button-counter></button-counter>

        <div :style="{fontSize: postFontSize + 'em'}">
            <blog-post v-for="post in options" v-bind:key="post.value" v-bind:post="post"
                v-on:enlarge-text="onEnlargeText">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</blog-post>
        </div>
        <custom-input v-model="searchText" required placeholder="Enter your search text"></custom-input>
        <span>{{searchText}}</span>
        <br>
        <custom-input2 v-bind:labelValue.sync="labelValue" required placeholder="Enter your search text">
        </custom-input2>
        <span>{{labelValue}} 没有实现</span>
        <br>
        <custom-input2 v-bind:labelValue="labelValue" v-on:update:labelValue="labelValue=$event" required
            placeholder="Enter your search text">
        </custom-input2>
        <span>{{labelValue}} 没有实现</span>
    </div>

    <script type="text/javascript">

        /** 先定义在使用 */
        Vue.component('todo-item', {
            props: ["todo"],
            template: "<li>{{todo.text}}</li>"
        })

        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">你点了{{count}}次.</button>'
        })

        Vue.component('blog-post', {
            props: ['post'],
            template: `
            <div class="blog-post"> 
                <h3>{{post.value}}</h3>
                <button v-on:click="$emit('enlarge-text',0.1)"> Enlarge Text </button>
                <div v-html="post.text"></div>
                <slot></slot>
            </div>
            `
        })

        // 让v-model用在组件上
        Vue.component('custom-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            template: `
            <label>
                {{label}}
            <input
                v-bind="$attrs"
                v-bind:value="value"
                v-on:input="$emit('input',$event.target.value)"
            >
            </label>
            `
        })

        // 让v-model用在组件上
        Vue.component('custom-input2', {
            inheritAttrs: false,
            props: ['label', 'value'],
            template: `
            <label>
                {{label}}
            <input
                v-bind="$attrs"
                v-bind:value="value"
                v-on:input="$emit('update:labelValue',$event.target.value)"
            >
            </label>
            `
        })


        var app5 = new Vue({
            el: "#app5",
            data: {
                message: "郭海涛万岁!!",
                multilineMessage: "",
                selected: "",
                selectArray: [],
                options: [{ text: "Apple", value: "A" }, { text: "Body", value: "B" }, { text: "Cat", value: "C" }],
                toggle: "",
                postFontSize: 1,
                searchText: "",
                labelValue: ""
            },
            methods: {
                onEnlargeText: function (enlargeAmount) {
                    this.postFontSize += enlargeAmount
                }
            },
            computed: {
                reverseMessage: function () {
                    return this.message.split("").reverse().join("")
                }
            }
        })

        var app_2 = new Vue({
            el: "#app_2",
            data: {
                numbers: [1, 2, 3, 4, 5, 6, 7, 8]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })

        var app_1 = new Vue({
            el: "#app_1",
            data: {
                loginType: "username"
            },
            methods: {
                qiehuan(event) {
                    // `this` 在方法里指向当前Vue实例
                    console.log("loginType: " + this.loginType + "!")
                    // `event` 是原生 DOM 事件
                    if (event) {
                        console.log(event.target.tagName)
                    }
                    if (this.loginType === "username") {
                        this.loginType = "email"
                    } else {
                        this.loginType = "username"
                    }
                }
            }
        })


        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!",
                htmlStr: "<span style='color:red'>This should be red.</span>"
            }
        })

        var app1 = new Vue({
            el: "#app1",
            data: {
                message: "Hello Vue!" + new Date().toLocaleString()
            }
        })

        var app2 = new Vue({
            el: "#app2",
            data: {
                seen: false
            }
        })

        var app3 = new Vue({
            el: "#app3",
            data: {
                todos: [
                    { text: "王庚" },
                    { text: "郭海涛" },
                    { text: "秦始皇" },
                    { text: "唐明皇" },
                ]
            }
        })

        var app4 = new Vue({
            el: "#app4",
            data: {
                message: "郭海涛万岁!!"
            },
            methods: {
                reverseMessage: function (event) {
                    console.log(event)
                    this.message = this.message.split("").reverse().join("")
                }
            }
        })





    </script>
</body>

</html>